<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/4 0004
  Time: 22:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link href="../css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link href="../css/style.css" rel="stylesheet" type="text/css">
    <link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'>
    <link rel="stylesheet" type="text/css" href="../css/foot.css" />
    <link href="../css/index01.css" rel="stylesheet">
    <link href="../css/loading.css" rel="stylesheet" type="text/css">
    <style>
        html {
            font-family: 微软雅黑, serif;
            color: #333333;
        }

        a {
            color: #1D8CE0;
            cursor: pointer;
        }

        * {
            margin: 0px;
            padding: 0px;
        }
    </style>


</head>
<body style="background: #eee;">
<%--导航条--%>
<%@include file="../common/nav.jsp"%>

<%--主体内容--%>
<div style="width: 80%;margin: 20px auto 0px auto;">

    <div style="height: 200px;background: #ccc;padding:10px">
        <h4 style="line-height: 50px;font-size: 20px;font-weight: bolder;">1.简答题</h4>
        <h3 style="width: 100%;background: #eee;height: 80px;font-size: 20px;font-weight: bolder;">
            <%--显示接收后端的题目--%>
            ${completionList.get(0).comStem}
        </h3>
        <div id="judgment" style="float: right; font-size: 20px;font-weight: bolder; color: red">
        </div>
    </div>
    <div style="height: 300px;background: #1b6d85">
            <input type="text" id="answer" style="height: 300px;width: 100%;" >
    </div>

    <div  style="float: right">
        <button class="btn-info" id="submit" style="width: 100px;height: 40px;border: none;margin-top: 10px;" onclick="judgment()">交卷</button>
        <button class="btn-info" style="width: 100px;height: 40px;border: none;margin-top: 10px;" >下一题</button>
    </div>
</div>

<script type="text/javascript" src="../js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js" ></script>

<script>
    <%--答案校验--%>
    function judgment() {
        //1. 获取用户填入的数据
        var value = $("#answer").val();
        console.log(value);
        let answer =  "${completionList.get(0).comAnswer}";
        // console.log(answer);
        let emp  = "<span>答案不能为空</span> ";
        let yes  = "<span>答案正确</span> ";
        let no  = "<span>答案错误</span> ";

        //2. 获取搜索的文本框的数据
        if(value != ""){
            if (value == answer){
                $("#judgment").empty();
                $("#judgment").append(yes);
            }else if (value != answer){
                $("#judgment").empty();
                $("#judgment").append(no);
            }
        }
        else if (value == "") {
            $("#judgment").empty();
            $("#judgment").append(emp);
        }
    }
</script>
</body>
</html>
